<form [formGroup]="myForm">
  <div class="form-group">
    <br>
    <label for="id">学号</label>
    <input type="text" class="form-control" id="id" name="id" [formControl]='id' placeholder="请输入学号">
  </div>
  <div class="form-group">
    <label for="userName">用户名</label>
    <input type="text" class="form-control" id="userName" name="userName" [formControl]='userName'placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" name="password" [formControl]='password'placeholder="请输入密码">
  </div>
</form>

<br>

<div class="container">
  <div class="row">
    <div class="col-sm">
      <button type="button" class="btn btn-outline-success btn-block" (click)="add()">增加</button>
    </div>
    <div class="col-sm">
      <button type="button" class="btn btn-outline-primary btn-block" (click)="delete()">删除</button>
    </div>
    <div class="col-sm">
      <button type="button" class="btn btn-outline-danger btn-block" (click)="update()">修改</button>
    </div>
    <div class="col-sm">
      <button type="button" class="btn btn-outline-warning btn-block" (click)="search()">查询</button>
    </div>
  </div>
</div>

<br>

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">序号</th>
      <th scope="col">学号</th>
      <th scope="col">姓名</th>
      <th scope="col">密码</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let user of users$ | async; let i=index' (click)="select(user)">
      <th scope="row">{{i}}</th>
      <td>{{user.id}}</td>
      <td>{{user.userName}}</td>
      <td>{{user.password}}</td>
    </tr>
  </tbody>
</table>